/*
 * @Author: Eli.Chen
 * @Date: 2025-04-27 14:37:41
 * @LastEditors: Eli.Chen
 * @LastEditTime: 2025-04-29 18:14:33
 * @Description:
 */

import React, { useEffect, useState } from 'react';
import { Menu, Avatar } from 'antd';
import { Outlet } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
import { useNavigate, useLocation } from 'react-router-dom';
import { AppstoreOutlined, MailOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons';

import { getUserPartInfo } from '@/api/user';
import { setUserIsRefresh } from '@/store/reducers/active';
import { urlMap, imagesMap } from '@/utils';
import { COLOR_THEME } from '@/config/theme';
import { ReactComponent as WorksIcon } from '@/assets/image/icons/WorksIcon.svg';
import { ReactComponent as SelectedWorksIcon } from '@/assets/image/icons/SelectedWorksIcon.svg';

export default function UserHome() {
    const navigate = useNavigate();
    const dispatch = useDispatch();
    const location = useLocation();
    const { userInfo } = useSelector((state) => state.auth);
    const { userIsRefresh } = useSelector((state) => state.active);
    const [userCardInfo, setUserCardInfo] = useState({});

    const items = [
        {
            key: '/user',
            label: '作品中心',
            icon:
                location?.pathname === '/user' ? (
                    <SelectedWorksIcon
                        style={{
                            width: '20px',
                            height: '20px',
                        }}
                    />
                ) : (
                    <WorksIcon
                        style={{
                            width: '20px',
                            height: '20px',
                        }}
                    />
                ),
        },
        {
            key: '/user/editProfile',
            label: '编辑信息',
            icon: <AppstoreOutlined />,
        },
        {
            key: '/user/userSetting',
            label: '账号设置',
            icon: <SettingOutlined />,
        },
    ];
    const getUserCardInfor = async () => {
        try {
            if (userInfo) {
                const { userId } = userInfo;
                const response = await getUserPartInfo(userId);
                setUserCardInfo(response?.data);
            }
        } catch (error) {
            console.error('获取用户信息失败:', error);
        }
    };

    useEffect(() => {
        getUserCardInfor();
    }, []);

    useEffect(() => {
        if (userIsRefresh) {
            getUserCardInfor();
            dispatch(setUserIsRefresh(false));
        }
    }, [userIsRefresh]);

    return (
        <div
            style={{
                width: '100%',
                height: '100%',
                backgroundColor: COLOR_THEME.BG_BASE,
                overflow: 'hidden',
                paddingTop: '40px',
            }}
        >
            <div
                style={{
                    width: '70%',
                    height: '90vh',
                    margin: '20px auto 1px auto',
                    padding: '16px',
                    borderRadius: '8px',
                    display: 'flex',
                    flexDirection: 'column',
                    overflow: 'hidden',
                }}
            >
                <div
                    style={{
                        flex: 1, // 自动填充剩余空间
                        display: 'flex',
                        flexDirection: 'column',
                        gap: '16px',
                        overflow: 'hidden',
                    }}
                >
                    {/* 个人信息板块 */}
                    <div
                        style={{
                            background: '#fff',
                            padding: '16px',
                            borderRadius: '8px',
                            minHeight: '100px',
                            position: 'relative',
                            zIndex: 0,
                        }}
                    >
                        <div
                            style={{
                                position: 'relative',
                                top: '-13px',
                                zIndex: 1,
                                display: 'flex',
                                flexDirection: 'row',
                            }}
                        >
                            <Avatar
                                size={100}
                                src={
                                    urlMap.defaultUrl +
                                    imagesMap.defaultAvatarPath +
                                    userInfo.userId +
                                    '/' +
                                    userCardInfo.avatarPath
                                }
                                style={{
                                    position: 'relative',
                                    border: '2px solid #fff',
                                    boxShadow: '0 4px 12px rgba(0,0,0,0.2)',
                                }}
                            />
                            <div
                                style={{
                                    display: 'flex',
                                    flexDirection: 'column',
                                    gap: '10px',
                                    marginLeft: '30px',
                                    marginTop: '50px',
                                }}
                            >
                                <div
                                    style={{
                                        fontSize: '20px',
                                        fontWeight: 'bold',
                                    }}
                                >
                                    {userCardInfo?.username}
                                </div>
                                <div>
                                    {userCardInfo?.signature ? `个性签名：${userCardInfo?.signature}` : '暂无签名~ ~ ~'}
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* 主体内容容器 */}
                    <div
                        style={{
                            flex: 1,
                            display: 'flex',
                            gap: '16px',
                            overflow: 'hidden',
                            paddingBottom: '8px', // 底部内边距替代外部间距
                        }}
                    >
                        {/* 侧边栏 */}
                        <div
                            style={{
                                width: '200px',
                                background: '#fff',
                                borderRadius: '8px',
                                padding: '5px',
                                overflowY: 'auto',
                            }}
                        >
                            <Menu
                                onClick={(e) => navigate(e.key)}
                                style={{
                                    width: 190,
                                    border: 'none',
                                }}
                                selectedKeys={[location.pathname]}
                                mode="inline"
                                items={items}
                            />
                        </div>

                        {/* 内容区域 */}
                        <div
                            style={{
                                flex: 1,
                                background: '#fff',
                                borderRadius: '8px',
                                padding: '16px',
                                overflowY: 'auto',
                                scrollbarWidth: 'none', // Firefox
                                msOverflowStyle: 'none', // IE
                                '&::-webkit-scrollbar': {
                                    display: 'none', // Chrome/Safari
                                },
                            }}
                        >
                            <Outlet />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}
